<template>
<div class="page">
  <nav-top title="新建收货地址">
          <span slot='right' @click='addNewAddress'>保存</span>
        </nav-top>
        <page-content>

          <group>
            <x-input ref='name' title="姓名" is-type='china-name' required type="text" placeholder='请输入姓名' v-model="newAddress.name"></x-input>

            <x-input ref='phone' title="电话" is-type='china-mobile' required type="text" placeholder='请输入手机号或固定电话' 
            v-model="newAddress.phone"></x-input>

            <x-address ref='area' :title="'地区'" 
            v-if='showAreaPicker'
            v-model="newAddress.area" placeholder="请选择省市区"
            :list="areaData"
            value-text-align="left"
            ></x-address>

            <x-input ref='address' title='地址' placeholder='请输入街道、门牌号等详细地址信息' v-model="newAddress.address" required type="text"></x-input>

            <x-input title='邮编' placeholder='请输入6位邮政编码' v-model="newAddress.postcode" type="number"></x-input>

            <checklist :options="[{key:true,value:'设为默认收货地址'}]" v-model="newAddress.default"></checklist>

          </group>
        </page-content>
</div>
</template>

<script>
  import navTop from '../../components/header/navTop'
  import pageContent from '../../components/pagecontent'
  // import xlFooter from '../../components/footer.vue'
  import {
    Checklist,
    Group,
    PopupPicker,
    XInput,
    ChinaAddressV1Data,
    XAddress
  } from 'vux'

export default {
  name:'addAddress',
  data () {
    return {
      areaData:ChinaAddressV1Data,
      showAreaPicker:true,
        newAddress: {
          name: '',
          phone: '',
          area: [],
          address: '',
          postcode:'',
          default:[true]
        }
    }
  },
  methods:{
    addNewAddress (){
      for(let item in this.$refs){
        let result = true 
        if(item === 'area') continue
        result = result && this.$refs[item].valid
      }
      this.$router.go(-1)
    }
  },
  components:{
    navTop,
    pageContent,
    // xlFooter,
    Checklist,
    Group,
    XInput,
    PopupPicker,
    XAddress
  }
}
</script>

<style lang="scss">
  
</style>